﻿<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>store-推荐</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="css/mui.min.css">
		<style>
			html,
			body {
				background-color: #efeff4;
			}
			
			.title {
				padding: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
				margin-top: 1rem;
				background-color: #fff;
			}
			.mui-table-view:after{height:2px;}
			.mui-table-view:before{height:0;}
			.mui-table-view.mui-grid-view{background-color:#E8EDF1;}
		</style>
	</head>

	<body>
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<!--<div class="title">
					这是webview模式选项卡中的第0个子页面
				</div>-->
				<ul class="mui-table-view mui-grid-view" style="width: 100%;">
			        <li class="mui-table-view-cell mui-media mui-col-xs-6">
			            <a href="#">
			                <img id="item-1" class="mui-media-object mui-pull-left" src="images/tj-1.jpg" >
			                <img style="margin-top:-170px;margin-left:1px;width:70px;height:70px;" class="mui-media-object mui-pull-left" src="" >
			            </a>
			        </li>
			        <li class="mui-table-view-cell mui-media mui-col-xs-6">
			            <a href="#">
			                <img id="item-2" class="mui-media-object mui-pull-left" src="images/tj-2.jpg" >
			                <img style="margin-top:-170px;margin-left:1px;width:70px;height:70px;" class="mui-media-object mui-pull-left" src="" >
			            </a>
			        </li>
			        <li class="mui-table-view-cell mui-media mui-col-xs-6">
			            <a href="#">
			                <div class="mui-text-justify">清风原木纯品200抽卫生纸3包</div>
			                <div class="mui-media-body">需要工分：500</div>
			            </a>
			            <a href="#">
			                <img class="mui-media-object mui-btn-link mui-pull-left" src="" >
			            </a>
			        </li>
			        <li class="mui-table-view-cell mui-media mui-col-xs-6">
			            <a href="#">
			                <div class="mui-text-justify">王老吉植物凉茶250ml×12</div>
			                <div class="mui-media-body">需要工分：1200</div>
			            </a>
			            <a href="#">
			                <img class="mui-media-object mui-btn-link mui-pull-left" src="" >
			            </a>
			        </li>
			    </ul>
				<ul class="mui-table-view mui-grid-view" style="width: 100%;">
			        <li class="mui-table-view-cell mui-media mui-col-xs-6">
			            <a href="#">
			                <img id="item-3" class="mui-media-object mui-pull-left" src="images/tj-3.jpg" >
			            </a>
			        </li>
			        <li class="mui-table-view-cell mui-media mui-col-xs-6">
			            <a href="#">
			                <img id="item-4" class="mui-media-object mui-pull-left" src="images/tj-4.jpg" >
			            </a>
			        </li>
			        <li class="mui-table-view-cell mui-media mui-col-xs-6">
			            <a href="#">
			                <div class="mui-text-justify">旺仔牛奶礼盒125ml×4盒×5排</div>
			                <div class="mui-media-body">需要工分：1880</div>
			            </a>
			            <a href="#">
			                <img class="mui-media-object mui-btn-link mui-pull-left" src="" >
			            </a>
			        </li>
			        <li class="mui-table-view-cell mui-media mui-col-xs-6">
			            <a href="#">
			                <div class="mui-text-justify">植护原木抽纸20包整箱</div>
			                <div class="mui-media-body">需要工分：3680</div>
			            </a>
			            <a href="#">
			                <img class="mui-media-object mui-btn-link mui-pull-left" src="" >
			            </a>
			        </li>
			    </ul>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/mui.enterfocus.js"></script>
		<script src="js/common.js"></script>
		<script src="js/app.js"></script>
		<script>
			mui.init({
				swipeBack: false,
				keyEventBind: {
					backbutton: false //关闭back按键监听
				},
				pullRefresh: {
					container: '#pullrefresh',
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});
			var count = 0;
			/**
			 * 上拉加载具体业务实现
			 */
			function pullupRefresh() {
				setTimeout(function() {
					mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
					var table = document.body.querySelector('.mui-table-view');
					var cells = document.body.querySelectorAll('.mui-table-view-cell');
					for(var i = cells.length, len = i + 4; i < len; i++) {
						var li = document.createElement('li');
						li.className = 'mui-table-view-cell mui-media mui-col-xs-6';
						li.innerHTML = '<a href="#"><img id="item-'+(i+1)+'" class="mui-media-object mui-pull-left" src="images/tj-3.jpg" ></a>';
						table.appendChild(li);
						
						var li2 = document.createElement('li');
						li2.className = 'mui-table-view-cell mui-media mui-col-xs-6';
						li2.innerHTML = '<a href="#"><img id="item-'+(i+2)+'" class="mui-media-object mui-pull-left" src="images/tj-4.jpg" ></a>';
						table.appendChild(li2);
						
						var li3 = document.createElement('li');
						li3.className = 'mui-table-view-cell mui-media mui-col-xs-6';
						var a1 = document.createElement('a');
						a1.href = '#';
						a1.innerHTML = '<div class="mui-text-justify">旺仔牛奶礼盒125ml×4盒×5排</div><div class="mui-media-body">需要工分：1880</div>';
						li3.appendChild(a1);
						var a2 = document.createElement('a');
						a2.href = '#';
						a2.innerHTML = '<img class="mui-media-object mui-btn-link mui-pull-left" src="" >';
						li3.appendChild(a2);
						table.appendChild(li3);
						
						var li4 = document.createElement('li');
						li4.className = 'mui-table-view-cell mui-media mui-col-xs-6';
						var a3 = document.createElement('a');
						a3.href = '#';
						a3.innerHTML = '<div class="mui-text-justify">植护原木抽纸20包整箱</div><div class="mui-media-body">需要工分：3680</div>';
						li4.appendChild(a3);
						var a4 = document.createElement('a');
						a4.href = '#';
						a4.innerHTML = '<img class="mui-media-object mui-btn-link mui-pull-left" src="" >';
						li4.appendChild(a4);
						table.appendChild(li4);
					}
				}, 1000);
			}
			mui.plusReady(function() {
				mui("#item-1")[0].addEventListener('tap',function(){
					//play("item-1");
				});
				mui("#item-2")[0].addEventListener('tap',function(){
					//play("item-2");
				});
				mui("#item-3")[0].addEventListener('tap',function(){
					//play("item-3");
				});
				mui("#item-4")[0].addEventListener('tap',function(){
					//play("item-4");
				});
			});
			
			function play(name) {
				clicked("playvideo.html", true, {
					"mid": name
				});
				/*var playvideoPage = $.preload({
					"id": 'playvideo',
					"url": 'playvideo.html'
				});
				//创建页面
				//获取class,如果名字为video,开启硬件加速
				//hardwareAccelerated
				mui.openWindow(
					id, id,{
					styles:{
						hardwareAccelerated:true
					}
				});
				mui.openWindow({
					id: 'playvideo',
					show: {
						aniShow: 'pop-in'
					},
					styles: {
						hardwareAccelerated:true
					}
				});*/
			}
		</script>
	</body>

</html>